// 写生产环境和 开发环境中公告配置（都有的配置）
let { relativeUrl } = require("./path");

// 在命令窗口中执行webpack的时候 会自动的来执行该文件
// webpack的配置文件 都写在这该文件中即可

// const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin");

const MinCssExtractPlugin = require("mini-css-extract-plugin");

const chalk = require("chalk"); // webpack 内置存在的，不需要安装
const ProgressBarWebpackPlugin = require("progress-bar-webpack-plugin"); //进度条

const { html, entry } = require("./html");

module.exports = {
  entry: entry,
  module: {
    rules: [
      {
        test: /\.(js|ts|jsx|tsx)$/,
        include: [relativeUrl("./src")],
        use: {
          loader: "esbuild-loader",
          options: {
            target: "es2015",
          },
        },
      },
      {
        test: /\.(css|scss|sass)$/,
        use: [MinCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|svg|gif|jpe?g)$/,
        type: "asset",
        generator: {
          filename: "img/[name].[contenthash][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 20 * 1024,
          },
        },
      },
    ],
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: relativeUrl("./public"),
          to: relativeUrl("./dist"),
          globOptions: {
            ignore: ["**/*.html"],
          },
        },
      ],
    }),
    // 配置html页面
    ...html,
    // 设置打包进度
    new ProgressBarWebpackPlugin({
      format: `  build [:bar] ${chalk.green.bold(
        ":percent"
      )}(:elapsed seconds)`,
      clear: false,
    }),
    new MinCssExtractPlugin({
      // 初始化 抽离css代码的插件
      filename: "style/[name].css", //设置输出的css文件名
    }),
  ],
  cache: {
    type: "filesystem",
  },
};
